<template>
  <div class="common">
    <div class="outsideSport" v-for="item in categoryNavs" :key="item.name">
      <h2 class="title">{{item.name}}</h2>
      <div>
        <a href="javascript:;" v-for="item2 in item.navCon[type]" :key="item2" @click="gotoSearch">{{item2}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryNavs: [],
      type: ''
    }
  },
  props: ['currentIndex'],
  mounted() {
    this.getCategorysNav()
  },
  methods: {
    async getCategorysNav() {
      let result = await this.$API.reqCategoryNav()
      this.categoryNavs = result.data
    },
    gotoSearch() {
      this.$router.push({
        name: 'search'
      })
    }
  },
  watch: {
    currentIndex: {
      handler() {
        if(this.currentIndex === 1) {
          this.type = 'clothes'
        }else if(this.currentIndex === 2) {
          this.type = 'shoes'
        }else {
          this.type = 'equiment'
        }
      },
      immediate: true,
    }
  }
};
</script>

<style lang="less" scoped>
.common {
  padding: 20px;
  .outsideSport {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 15px;
      padding: 0 0 0 5px;
      font-weight: 700;
      color: #232323;
      margin-bottom: 10px;
    }
    div {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      a {
        width: 40%;
        height: 55px;
        background-color: #f6f6f6;
        border-radius: 2px;
        text-align: center;
        line-height: 55px;
        padding: 0 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>